<template>
  <div class="product-detail">
       <s-header :name="'商品详情'"></s-header>
           <div class="detail-content">
      <div class="detail-swipe-wrap">
        <van-swipe class="my-swipe" indicator-color="#1baeae">
          <van-swipe-item v-for="(item, index) in detail.goodsCarouselList" :key="index">
            <img :src="prefix(item)" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="product-info">
        <div class="product-title">
          {{ detail.goodsName }}
        </div>
        <div class="product-desc">免邮费 顺丰快递</div>
        <div class="product-price">
          <span>¥{{ detail.sellingPrice }}</span>
          <!-- <span>库存203</span> -->
        </div>
      </div>
      <div class="product-intro">
        <ul>
          <li>概述</li>
          <li>参数</li>
          <li>安装服务</li>
          <li>常见问题</li>
        </ul>
        <div class="product-content" v-html="detail.goodsDetailContent"></div>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" :info="!count ? '' : count" @click="goTo()" text="购物车"/>
      <van-goods-action-button type="warning" @click="addCart" text="加入购物车" />
      <van-goods-action-button type="danger" @click="goToCart" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getDetail } from '../service/good'
import { addCart } from '../service/cart'
import sHeader from '@/components/SimpleHeader'
import { Toast } from 'vant'
export default {
    data() {
        return {
            detail:{
                goodsCarouselList:[]
            }
        }
    },
    components:{
        sHeader
    },
    async addCart(){
        const { id } = this.$route.params
        const { data } = await getDetail(id)
        this.detail = data
    },
    methods: {
        goBack(){
            this.$router.go(-1)
        },
        goTo(){
            this.$router.push({path:'/cart'})
        },
        async addCart(){
            const { data, resultCode } = await addCart({ goodsCount:1,goodsId:this.detail.goodsId})
            if(resultCode == 200) Toast.success('添加成功')
            this.$store.dispatch('updateCart')
        },
        async goToCart(){
            const { data, resultCode } = await addCart({ goodsCount:1,goodsId:this.detail.goodsId})
            this.$store.dispatch('updateCart')
            this.$router.push({path:'/cart'})
        }
    },
    computed:{
        count(){
            return this.$store.state.cartCount
        }
    }
}
</script>

<style>

</style>